<template>
  <div id="menuConfiguration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <div>应用市场</div>
          <div class="search">
            <el-input
              v-model.trim="searchData.search"
              style="width: 240px"
              placeholder="请输入..."
              :prefix-icon="Search"
            >
              <template #append>
                <el-button
                  type="primary"
                  size="large"
                  @click="getList('search')"
                  >搜索</el-button
                >
              </template>
            </el-input>
          </div>
        </div>
      </template>
      <!-- 菜单 -->
      <el-row class="tac">
        <el-col :span="4">
          <el-menu default-active="2" @select="select">
            <el-menu-item index="1">
              <div class="tc">我的({{ searchDataw.MyAppCont }})</div>
            </el-menu-item>
            <el-menu-item index="2">
              <div class="tc">全部:({{ searchDataw.TotalAppCont }})</div>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20">
          <div class="btns">
            <div class="textBtn" :class="{ isSelect: true }">默认</div>
          </div>
          <ul
            v-infinite-scroll="loadMore"
            class="infinite-list"
            style="overflow: auto"
          >
            <li
              v-for="(item, index) in searchData.tableData"
              :key="index"
              class="infinite-list-item"
              @click="toDetail(item)"
            >
              <div class="imgBox">
                <ProcessedImage :src="item.img" params="imageView2/2/h/40" />
              </div>
              <div class="textBox">
                <div class="top">
                  <div class="title">{{ item.name }}</div>
                  <div class="desc">
                    {{ item.blurb }}
                  </div>
                  <div class="btn">购买</div>
                </div>
                <div class="bottom">
                  <div class="info">
                    <span
                      >类型：{{ item.type === '2' ? '其他' : '主应用' }}</span
                    >
                    <span>出品方：{{ item.produce }}</span>
                    <span>适用省份：{{ item.province }}</span>
                    <span>适用对象：{{ item.targetObj }}</span>
                  </div>
                  <div class="price">{{ item.price }}元/年</div>
                </div>
              </div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { getAppList, getAppListsd } from '@/api/appv2/appv2';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 跳转详情
const toDetail = (item) => {
  router.push({
    path: '/serviceCenter/appDetail',
    query: {
      id: item.id,
      category: '购买',
      is_must: item.is_must,
    },
  });
};
// 列表
const searchDataw = ref({
  storeId: '',
  MyAppCont: 0,
  TotalAppCont: 0,
});
const searchData = ref({
  storeId: '',
  page: 0,
  pageSize: 10,
  search: '',
  tableData: [],
  last_page: 1,
});
// 获取列表
const getList = (type) => {
  searchData.value.tableData = [];
  if (type) {
    searchData.value.page = 1;
  }
  const { page, pageSize, search, storeId } = searchData.value;
  getAppList({ page, pageSize, search, storeId }).then(({ data }) => {
    if (data.data.length) {
      searchData.value.tableData = searchData.value.tableData.concat(data.data);
      searchData.value.page = data.current_page;
      searchData.value.pageSize = data.per_page;
      searchData.value.last_page = data.last_page;
      searchData.value.total = data.total; // 保存total字段
    } else {
      searchData.value.tableData = [];
      searchData.value.total = 0; // 如果没有数据，将total置为0
    }
  });
};

// 加载更多
const loadMore = () => {
  if (searchData.value.last_page === searchData.value.page) return;
  searchData.value.page++;
  getList();
};

const select = (key) => {
  if (key === '1') {
    searchData.value.storeId = JSON.parse(
      localStorage.getItem('userDateInfo')
    )?.storeId;
  } else {
    searchData.value.storeId = '';
  }
  searchData.value.tableData = [];
  searchData.value.page = 1;
  searchData.value.last_page = 1;
  getList();
};

onMounted(() => {
  getListsd();
});

const getListsd = () => {
  const storeId = searchDataw.value.storeId;
  getAppListsd({ storeId: storeId }).then(({ data }) => {
    searchDataw.value.MyAppCont = data.MyAppCont;
    searchDataw.value.TotalAppCont = data.TotalAppCont; // 保存total字段
  });
};

getListsd();
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

:deep(.el-menu) {
  height: 100%;

  .tc {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .el-menu-item {
    display: flex;
    align-items: center;
    height: 25px;
    line-height: 25px;
  }
}

.btns {
  display: flex;
  cursor: pointer;

  .textBtn {
    color: #444;
    font-size: 14px;
    margin-left: 30px;
  }

  .isSelect {
    color: #409eff;
  }
}

.infinite-list {
  height: 560px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  margin: 10px;
  padding: 10px 40px;
  border-bottom: 1px solid #e5e6e5;
  cursor: pointer;
  .imgBox {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    margin-right: 20px;
  }

  .textBox {
    flex: 1;

    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .title {
        font-size: 16px;
        color: #1d2129;
        left: 94px;
        top: 20px;
        cursor: pointer;
        font-weight: 700;
      }

      .desc {
        display: inline-block;
        margin-left: 16px;
        font-weight: 400;
        font-size: 12px;
        color: #86909c;
        max-width: 350px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .btn {
        text-align: right;
        flex: 1;
        font-size: 14px;
        color: #165dff;
        cursor: pointer;
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      .price {
        flex: 1;
        text-align: right;
        font-size: 12px;
        color: #4e5969;
      }

      .info {
        font-weight: 400;
        font-size: 12px;
        color: #86909c;

        span {
          margin-left: 8px;
        }
      }
    }
  }
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
